<template>
	<view class="list-search-page qxlj_back4">
		<z-paging ref="paging" 
				  v-model="goodsList"
				  @query="queryList"
				  :default-page-size="10"
				  :show-scrollbar="false"
				  :paging-style="{minHeight: '100vh'}"
				  height="100vh">
      <template #top>
        <!-- 顶部搜索 -->
        <!--		<mSearch class="nav-search" @search="handleSearch($event,0)" :show="false"></mSearch>-->
        <!-- 条件筛选 -->
        <sl-filter :independence="true" v-if="!BusinessId" :topFixed="true" :navHeight="44"
                   :color="titleColor" :isDesc="IsDesc" :themeColor="themeColor" :menuList.sync="filterList" @result="handleResult"></sl-filter>
      </template>
      <!-- 商品列表 -->
			<view class="list-content">
				<goods-list :list="goodsList"
						   :showSubTitle="true"
						   tag="门票"
						   :goodsType="goodsType"
						   @navTo="handleGoToDetail"
						   type="row"></goods-list>
<!--				<empty v-if="goodsList.length === 0" :isfiexd="true" title="没有找到相关消息"></empty>-->
			</view>
		</z-paging>
<!-- 		<uni-fab ref="reffab1" horizontal='right' :content='content' @trigger="trigger" @fabClick="fabClick"></uni-fab> -->
	</view>
</template>

<script>
	import mSearch from '@/mall_subpages/components/mehaotian-search/mehaotian-search.vue';
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
	import empty from '@/components/empty.vue'
	import GoodsList from '@/mall_subpages/components/goods-list.vue'
	import slFilter from '@/mall_subpages/components/sl-filter/sl-filter.vue';
	import Config from '@/config/index.js'
	import Filter from './filter.js'
  import {
    getGoodsList,
    getProductCategoryList, getShopBgList,
    getUserProductCarItemNum
  } from '@/api/mall.js'
	import uniFab from '@/components/uni-fab/uni-fab.vue'
	export default {
		name: "GoodsListSearch",
		components: {
			mSearch,
			slFilter,
			GoodsList,
			uniLoadMore,
			empty,
			uniFab
		},
		data() {
			return {
				content: [{
						iconPath: '/static/images/icon104.png',
						text: '首页'
					},
					// {
					// 	iconPath: '../../../static/images/icon105.png',
					// 	badge:0,
					// 	text: '购物车'
					// },
				],
				// 商品类型
				goodsType: 0,
				// 分页信息
				params: {
					Index: 1,
					Size: 10
				},
				// 商品列表信息
				goodsList: [],
				BusinessId: '',
				loadingType: 'more',
				filterData: [{}],
				themeColor: '#000000',
				titleColor: '#666666',
				filterResult: '',
				filterList: [],
				serachData: {
					// 商品类型
					"CategoryTypeId": undefined,
					// 是否推荐
					"IsRecommend": undefined,
					// 景区等级
					"SpotGrade": undefined,
					// 酒店星级
					"HotelStars": undefined,
					// 产品名称
					"ProductName": "",
					"FiledOrder": "ShowPrice desc"
				},
				contentTextObj: {
					contentdown: "上拉显示更多",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多商品了"
				},
				IsDesc:{},
				ProductCategoryId:undefined,//二级ID
			};
		},
		onLoad(options) {
			console.log("-----",options)
			const {
				type,
				Title,
				BusinessId,
				ProductCategoryId
			} = options || {}
			let title = Title || '搜索'
			if (type) {
				this.goodsType = type
				title = Config.goods_enums[this.goodsType]
			}
			if(ProductCategoryId){
				this.ProductCategoryId = ProductCategoryId;
			}
			BusinessId && (this.BusinessId = BusinessId)
			uni.setNavigationBarTitle({
				title: `${title}`
			});
			// 获取筛选数据
			this.getFilterData()
			this.getGoodsType(this.goodsType)
		},
		methods: {
			// 获取购物车数量
			async getCartListNumber() {
				try {
					const {
						Data
					} = await getUserProductCarItemNum()
					this.content[1].badge = Data
				} catch (e) {
					console.error(e)
				}
			},


			fabClick(e) {
				if (!this.$refs.reffab1.isShow) {
					this.getCartListNumber()
				}
			},
			//获取列表数据
			async queryList(pageNo, pageSize) {
				try {
					const param = {
						TypeId: this.goodsType,
						Index: pageNo,
						Size: pageSize,
						...this.serachData,
						ProductCategoryId: this.ProductCategoryId,
					}

					if (this.BusinessId) {
						delete param.TypeId
						param['BusinessId'] = this.BusinessId
					}
					
					const { Data } = await getGoodsList(param)
					this.$refs.paging.complete(Data);
				} catch (e) {
					console.error(e)
					this.$refs.paging.complete(false);
				}
			},

			trigger(e) {
				if (e.item.text === '首页') {
					uni.switchTab({
						url: '/pages/index/index'
					})
				} else if (e.item.text === '购物车') {
					uni.navigateTo({
						url: '/mall_subpages/cart/cart'
					})
				}
				this.$refs.reffab1.close()
			},

			async getGoodsType(ProductType) {
				console.log('ProductType', ProductType)
				try {
					//if (this.BusinessId) return;
					console.log('this.BusinessId', this.BusinessId)
					const {
						Data
					} = await getProductCategoryList({
						ProductType
					})
					console.log('Data', Data)
					let row = this.filterList && this.filterList.find(item => item.key === "CategoryTypeId") || {}
					console.log('row', row)
					//if(!row) return
					row.detailList = Data.map(item => {
						return {
							'title': item.Name,
							'value': item.Id
						}
					})

					row.detailList.unshift({
						'title': '全部',
						'value': 0
					})


					this.$forceUpdate()
				} catch (e) {
					console.log(e)
					//TODO handle the exception
				}
			},

			// 获取排序数据
			async getFilterData() {
				this.filterList = Filter[this.goodsType]
			},
			// 处理搜索
			handleSearch(e) {
				this.serachData.ProductName = e
				this.$refs.paging.reload()
			},
			// 处理条件筛选
			handleResult(e) {
				console.log(e)
				this.IsDesc = e;
				const type = Object.keys(e)[0]
				const value = e[type]
				console.log(type)
				console.log(value)
				if (type === 'ShowPrice') {
					this.serachData.FiledOrder = `${type} ${value}`
				} else {
					this.serachData[type] = value
				}
				this.$refs.paging.reload()
			},
			handleGoToDetail(item) {
				console.log(item)
				// uni.navigateTo({
				// 	url: `/mall_subpages/activitiesList/admissionTicketDetail?id=${item.Id}&type=${item.Type}`
				// })
				uni.navigateTo({
					url: `/mall_subpages/goods-detail/goods-detail?id=${item.Id}&type=${item.Type}`
				})
			},
		},
		//加载更多
		onReachBottom() {
			this.loadData();
		},
	}
</script>

<style lang="scss" scoped>
	* {
		background-color: #e9e9e9;
	}

	.text {
		margin-top: 50px;
		margin-left: 20px;
		width: 100%;
	}

	.list-search-page {
		position: relative;
		//background-color: #e9e9e9;
		min-height: 100vh;

		/deep/ .select-tab-fixed-top {
			//top: calc(var(--window-top) + 50px);
			z-index: 99999;
		}

		/deep/ .uni-fab {
			z-index: 999998;
		}

		/deep/ .uni-fab__circle {
			z-index: 999999;
		}

		/deep/ .content {
			background: #FFFFFF;
		}

		/deep/ .icon-search {
			color: #000;
		}

		/deep/ .popup-layer {
			position: fixed;
		}
	}

	.nav-search {
		top: var(--window-top);
		left: 0;
		width: 100%;
		z-index: 99999;
		position: fixed;
		background-color: #FFFFFF;
	}

	.list-content {
		padding: 30rpx;
	}
</style>